import React from 'react';
import '../../css/subreddit/posts.scss';
import reactLogo from '../../css/img/react.jpg';

const handleError = function(e) {
    e.target.src = reactLogo;
};

export default function Posts(props) {
    return (
        <ul className="subreddit-list">
        {
            props.posts.map(({ thumbnail, title, url }, index) => (
                <li key={ index } className="subreddit-item clear-fix">
                    <img src={ thumbnail } alt="暂无头像" onError={ handleError } />
                    <div className="panel panel-default" style={{ overflow: 'hidden' }}>
                        <div className="panel-body bg-success">
                            { title }
                        </div>
                        <div className="panel-footer">
                            <a href={ url }>点击查看</a>
                        </div>
                    </div>
                </li>
            ))
        }
        </ul>
    );
};